<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../vandor/bootstrap-5.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="../vandor/font-awesome/css/all.min.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
<!-- 顶部标题栏 -->
<div class="header">
    <div class="container">
        <div class="header-title">智能E生</div>
        <div class="header-subtitle">智能辅助问诊</div>
    </div>
</div>

<!-- 登录表单 -->
<div class="login-container">
    <div class="login-card">
        <h2 class="login-title">用户登录</h2>

        <form>
            <div class="form-group">
                <label for="username" class="form-label">用户名</label>
                <i class="fas fa-user input-icon"></i>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名或邮箱">
            </div>

            <div class="form-group">
                <label for="password" class="form-label">密码</label>
                <i class="fas fa-lock input-icon"></i>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>

            <div class="login-options">
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住我</label>
                </div>
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <button type="submit" class="btn btn-login">登 录</button>

            <div class="register-link">
                还没有账号? <a href="register.html">立即注册</a>
            </div>
        </form>
    </div>
</div>

<div class="footer">
    © 2025 智能E生 · 版权所有
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="../vandor/bootstrap-5.3.7-dist/js/bootstrap.bundle.min.js"></script>

<script>
    var storage = window.localStorage;
    // 表单提交处理
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        // 这里应该是实际的登录验证逻辑
        console.log('登录尝试:', { username, password });

        // 模拟登录成功后的跳转
        // setTimeout(() => {
        //     window.location.href = 'index.html';
        // }, 1000);

        // 实际项目中应该使用AJAX请求验证登录
        fetch("/AiMedical/api/user/login",{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
            body:JSON.stringify({
                "phone":username,
                "password":password
            }),
        }).then(
            response => response.json()
        ).then(data => {
            alert("登录成功!");
            if(data.code == 0){
                storage.setItem("userModel",JSON.stringify(data.content));
                window.location.href = 'index.html';
            }else{
                alert("登录失败!" + data.msg);
            }
        }).catch(error => {
            console.error('登录失败:', error);
            alert("登录失败!")
        });

    });

    // 添加点击动画效果
    document.querySelector('.btn-login').addEventListener('mousedown', function() {
        this.style.transform = 'translateY(0) scale(0.98)';
    });

    document.querySelector('.btn-login').addEventListener('mouseup', function() {
        this.style.transform = 'translateY(-2px)';
    });
</script>
</body>
</html>